<template>
  <div v-show="getShow">
    <h2 class="login-title">登录</h2>
    <a-form
      loading
      :model="formState"
      name="normal_login"
      class="login-form"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-form-item
        name="username"
        :rules="[{ required: true, message: '请输入用户名!' }]"
      >
        <a-input
          v-model:value="formState.username"
          allowClear
          autocomplete="off"
          size="large"
          placeholder="用户名"
        >
          <template #prefix>
            <IconFont type="icon-yonghuming" style="font-size: 18px" />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item
        name="password"
        :rules="[{ required: true, message: '请输入密码!' }]"
      >
        <a-input-password
          v-model:value="formState.password"
          allowClear
          autocomplete="off"
          placeholder="密码"
          size="large"
        >
          <template #prefix>
            <IconFont type="icon-mima" style="font-size: 18px" />
          </template>
        </a-input-password>
      </a-form-item>
      <a-form-item>
        <a-button
          type="primary"
          style="width: 100%"
          :disabled="disabled"
          html-type="submit"
          size="large"
          class="login-form-button"
        >
          登录
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
import { reactive, ref, computed } from 'vue';
import { useAuthStore } from '../../../../stores/auth.js';
import { useLoginState } from '@/hooks/sys/useLogin.js';

const authStore = useAuthStore();
const { setLoginState, getLoginState } = useLoginState();
const getShow = computed(() => {
  return getLoginState.value === 'login';
});

let validatePass = async (_rule, value) => {
  if (value === '') {
    return Promise.reject('请输入验证码');
  } else {
    if (formState.code !== 9) {
      return Promise.reject('验证码不正确');
    }
    return Promise.resolve();
  }
};

const formState = reactive({
  username: 'admin',
  password: 'admin',
  code: '',
  remember: true,
});

const setOtherUser = () => {
  formState.username = 'test';
};

const onFinish = (values) => {
  // console.log('Success:', values);
  authStore.login(values);
};
const onFinishFailed = (errorInfo) => {
  console.log('Failed:', errorInfo);
};
const disabled = computed(() => {
  return !(formState.username && formState.password);
});
</script>

<style lang="scss" scoped>
.login-title {
  margin-bottom: 30px;
}

.hr {
  font-size: 0.9rem;
  color: #575656;
}

.login-form {
  max-width: 400px;
  background-color: #fff;
  overflow: hidden;
}

.login-btn-list {
  display: flex;
  flex-wrap: wrap;
}

.other-login-type {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 22px;

  .type-item {
    cursor: pointer;

    &:hover {
      color: $color-primary !important;
    }
  }
}
</style>
